import * as React from 'react';
import { useState, useEffect, FC, ReactElement } from 'react';
import RangePickerItemDate, {
  RangePickerItemDateProps,
} from '@/RangePickerItemDate';

import { Input, Select, Form } from 'antd';
import { InputProps } from 'antd/lib/input';
import { FormItemProps } from 'antd/lib/form';
import { SelectProps } from 'antd/lib/select';

const { Option } = Select;

export interface OptionItem {
  key: string | number;
  value: string | number;
}

export type SelectProperty = SelectProps<any> & {};

export interface SearchFormItemProps {
  /** type类型  */
  type:
    | 'input'
    | 'select'
    | 'date'
    | 'datePicker'
    | 'cascader'
    | 'rangePickerItemDate'
    | string; // Form-item 的type
  /** Item的Props  */
  Property: FormItemProps;
  /** Input的Props  */
  inputProperty?: InputProps;
  /** Select的Props  */
  selectProperty?: SelectProperty;
  /** 时间选择  */
  rangePickerItemDateProperty?: RangePickerItemDateProps;
  /** Select数组  */
  optionList?: OptionItem[];
}

const SearchFormItem: FC<SearchFormItemProps> = props => {
  const {
    // 通用属性
    type,
    Property,
    selectProperty,
    inputProperty,
    rangePickerItemDateProperty,
    optionList,
  } = props;
  if (inputProperty) {
    const { className } = inputProperty;
    console.log(className);
  }
  const renderFormFuc = () => {
    let renderForm = null;
    switch (type) {
      case 'input':
        renderForm = <Input {...inputProperty}></Input>;
        break;
      case 'select':
        renderForm = (
          <>
            {optionList && optionList.length > 0 ? (
              <>
                <Select {...selectProperty}>
                  {optionList.length ? (
                    <>
                      {optionList.map((v, i) => {
                        return (
                          <Option key={i} value={v['key']}>
                            {v['value']}
                          </Option>
                        );
                      })}
                    </>
                  ) : (
                    <></>
                  )}
                </Select>
              </>
            ) : (
              <></>
            )}
          </>
        );
        break;
      case 'datePicker':
        renderForm = <div>时间选择器</div>;
        break;

      case 'cascader':
        renderForm = <div>联级选择器</div>;
        break;
    }
    return renderForm;
  };

  return (
    <>
      {'rangePickerItemDate' !== type ? (
        <Form.Item {...Property}>{renderFormFuc()}</Form.Item>
      ) : (
        <>
          {rangePickerItemDateProperty ? (
            <RangePickerItemDate {...rangePickerItemDateProperty} />
          ) : (
            <></>
          )}
        </>
      )}
    </>
  );
};

export default SearchFormItem;
